<script setup>
const label = [{
    name: '待付款', icon: 'rmb-circle', value: 3
}, {
    name: '待收货', icon: 'car', value: 100
}, {
    name: '待评价', icon: 'chat', value: 30
}, {
    name: '售后/退款', icon: 'kefu-ermai', value: 5
}, {
    name: '我的订单', icon: 'order', value: 0
}]

const label2 = [{
    name: '收藏', icon: 'star', value: 3
}, {
    name: '优惠券', icon: 'coupon', value: 100
}, {
    name: '浏览记录', icon: 'clock', value: 30
}, {
    name: '店铺关注', icon: 'heart', value: 5
}, {
    name: '更多', icon: 'more-circle', value: 0
}]

</script>

<template>
    <div class="mine">
        <div class="mine-title">
            <div>
                <image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="scaleToFill" />
            </div>
            <div>
                登录/注册 >
            </div>
            <div>
                <u-icon class="icon" size="26" name="setting"></u-icon>
                <u-icon class="icon" size="26" name="chat"></u-icon>
            </div>
        </div>
        <div class="mine-middle">
            <div v-for="(item, index) in label" :key="index">
                <u-badge class="badge" numberType="overflow" max="99" :value="item.value"></u-badge>
                <u-icon size="40" :name="item.icon"></u-icon>
                <div class="label">{{ item.name }}</div>
            </div>
        </div>

        <div class="mine-middle">
            <div v-for="(item, index) in label2" :key="index">
                <u-badge class="badge" numberType="overflow" max="99" :value="item.value"></u-badge>
                <u-icon size="40" :name="item.icon"></u-icon>
                <div class="label">{{ item.name }}</div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
$topHeight: 130rpx;

.mine {
    position: relative;
    min-height: 100vh;
    width: 100%;
    margin:0 auto;
    // background: liner-gradient(to bottom, #ed7b29, #fff);
    background-color: #07a6ea1d;
    padding-top: 30rpx;
    .mine-title {
        height: $topHeight;
        display: flex;
        margin-left: 20rpx;
        position: relative;
        div:nth-child(1) {
            margin-top: 10rpx;
            width: 100rpx;
            height: 100rpx;
            overflow: hidden;
            border-radius: 50%;

            image {
                width: 130rpx;
                height: 130rpx;
            }
        }

        div:nth-child(2) {
            position: absolute;
            top: 20rpx;
            width: 200rpx;
            left: 140rpx;
        }

        div:nth-child(3) {
            position: absolute;
            width: 200rpx;
            height: 100rpx;
            right: 0;
            top: 0;
            display: flex;
            justify-content: flex-end;
            >.icon {
                margin: 10rpx;
            }
        }

    }

    .mine-middle {
        display: flex;
        justify-content: space-between;
        margin: 20rpx;
        width: 96%;
        align-items: center;
        height: 150rpx;
        border-radius: 20rpx;
        background-color: #fcfcfc;
        box-shadow: 3px 3px 5px #ccc;

        div {
            position: relative;
            display: flex;
            flex-direction: column;
            width: 15%;
         
            align-items: center;

            .badge {
                position: absolute;
                top: -7rpx;
                right: -7rpx;
            }

            .label {
                font-size: 20rpx;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                width: 100%;
            }
        }


    }
}
</style>